<script>
  document.addEventListener('DOMContentLoaded', function () {
    //分类名称
    const dateStrData = '{{currentCat}}';
    //console.log(dateStr);
    //JSON字符串,{"posts":[],"count":3,"name":"人生思考","url":"think.html","children":[]}
    const dateStr = JSON.parse(dateStrData); //将json字符串转为对象
    const name = dateStr['name'];
    const count = dateStr['count'];// count 分类文章数量
    const tittle = name + '&nbsp;&nbsp;(' + count + ')';
    document.getElementById('cat-count').innerHTML = tittle;
  });
</script>

<main class="style-container content-container rounded-xl style-article-bg flex-1 flex-1">
  <div id="article" class="flex flex-wrap style-space-max sm:mt-12">

    <!--首页不展示分类标题-->
    <h1 id="cat-count" class="style-title size-title-max">{{currentCat}}</h1>

    {% for p in posts %}
    <article class="w-full style-des">
      <!-- featured image 
  {% if p.ext_featured_image.length %}
  <div class="f-img"><img src="{{ p.ext_featured_image }}" /></div>
  {% /if %}
            {% if p.ext_small_image.length %}
          <div class="a-content-img">
            <img src="{{ p.ext_small_image }}" />
          </div>
          {% /if %}
  -->
      <a href="{{ p.url }}">
        <h3 class="line-clamp-1 style-title size-title">{{ p.title }}</h3>
      </a>
      <!---<p class="line-clamp-2 my-4 text-xs sm:text-base">666</p>
      怎么给下面的P标签添加样式
      -->
      {% if p.ext_excerpt.length %}
      {{ p.ext_excerpt }}
      {% else %}
      {{ p.desContent }}
      {% /if %}

      <span class="flex flex-wrap items-center font-medium style-space-mini size-title-sub"><span
          class="flex items-center gap-1" title="发布时间">
          <svg class="style-icon-mini" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="5266" width="200" height="200">
            <path
              d="M511.82 144.68c202.11 0 366.55 164.43 366.55 366.55 0 202.11-164.43 366.55-366.55 366.55S145.27 713.34 145.27 511.22c0-202.11 164.44-366.54 366.55-366.54m0-81.46c-247.42 0-448 200.58-448 448s200.58 448 448 448 448-200.58 448-448-200.58-448-448-448z"
              fill="currentColor" p-id="5267"></path>
            <path
              d="M613.06 655.08c-10.47 0-20.93-4.02-28.88-12.01l-102.5-103.14a40.737 40.737 0 0 1-11.84-28.72V286.98c0-22.49 18.24-40.73 40.73-40.73s40.73 18.24 40.73 40.73v207.43l90.65 91.22c15.86 15.97 15.78 41.74-0.18 57.61-7.94 7.9-18.33 11.84-28.71 11.84z"
              fill="currentColor" p-id="5268"></path>
          </svg>
          <time>{{ p.date }}</time>
        </span>
        <span class="items-center gap-1 hidden sm:flex" title="文章分类">
          <svg class="style-icon-mini" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="6299" width="200" height="200">
            <path
              d="M725.290667 725.290667m-213.333334 0a213.333333 213.333333 0 1 0 426.666667 0 213.333333 213.333333 0 1 0-426.666667 0Z"
              fill="currentColor" p-id="6300"></path>
            <path
              d="M789.205333 234.794667m-149.333333 0a149.333333 149.333333 0 1 0 298.666667 0 149.333333 149.333333 0 1 0-298.666667 0Z"
              fill="currentColor" p-id="6301"></path>
            <path
              d="M235.861333 788.138667m-149.333333 0a149.333333 149.333333 0 1 0 298.666667 0 149.333333 149.333333 0 1 0-298.666667 0Z"
              fill="currentColor" p-id="6302"></path>
            <path
              d="M298.709333 298.709333m-213.333333 0a213.333333 213.333333 0 1 0 426.666667 0 213.333333 213.333333 0 1 0-426.666667 0Z"
              fill="currentColor" p-id="6303"></path>
          </svg>
          <!-- 分类 
          <span>
            <a href="#"> 生活日志 </a>
            {% if p.cats.@count %}<span>发布在&nbsp;</span> {% /if %}
          </span>
          -->
          {% for cat in p.cats %}
          <span><a href='{{ cat.url }}'>{{ cat.name }}</a></span>
          {% /for %}
        </span>
      </span>
      <!-- 阅读更多 
      {% if p.readMore.length %} <a href="{{ p.url }}">阅读更多</a>&nbsp;&nbsp; {% /if %}
      -->
    </article>
    {% /for %}

    <!--翻页-->
    {% if prevPageUrl.length && nextPageUrl.length %}<!--没有下一页就隐藏-->
    <div class="relative h-7 flex items-center w-full my-4 sm:my-12! size-title style-title-sub">
      {% if prevPageUrl.length %}
      <a class="absolute left-0" href="{{ prevPageUrl }}">
        <button class="cursor-pointer style-hover btn-animation">«&nbsp;上一页</button>
      </a> {% /if %}
      {% if nextPageUrl.length %}
      <a class="absolute right-0" href="{{ nextPageUrl }}">
        <button class="cursor-pointer style-hover btn-animation">下一页&nbsp;»</button>
      </a>
      {% /if %}
    </div>
    {% else %}
    <div class="w-full"></div>
    {% /if %}
    <!--翻页 end-->
  </div>
</main>